<template>
  <div class="cal-wrapper">
    <div class="cal-header" :style="{height: initItemHeight,marginBottom: initMarginBottom}">
      <div class="l" @click="preMonth" :style="{height: initItemHeight}"><div class="icon-back" :style="{fontSize: initTitleFontSize,height: initItemHeight,lineHeight: initItemHeight}"></div></div>
      <div class="title" :style="{height: initItemHeight,lineHeight: initItemHeight,fontSize: initTitleFontSize}">{{curYearMonth}}</div>
      <div class="r" @click="nextMonth" :style="{height: initItemHeight}"><div class="icon-progress" :style="{fontSize: initTitleFontSize,height: initItemHeight,lineHeight: initItemHeight}"></div></div>
    </div>
    <div class="cal-body">
      <div class="weeks" :style="{marginBottom: initMarginBottom}">
        <span
          v-for="(dayName, dayIndex) in i18n[calendar.options.locale].dayNames"
          :key="dayIndex"
          :style="{height: initItemHeight,lineHeight: initItemHeight,width: initItemWidth,fontSize: initItemFontSize,marginRight: (dayIndex == 6 ? 0 : initMarginRight)}"
          class="item">
          {{i18n[calendar.options.locale].dayNames[(dayIndex + calendar.options.weekStartOn) % 7]}}
        </span>
      </div>
      <div class="dates" >
        <div v-for="date in dayList" 
          :key="date.index"
          :style="{height: initItemHeight,width: initItemWidth,marginRight: (date.index % 7 == 0 ? 0 : initMarginRight),marginBottom: (date.index > 35 ? 0 : initMarginBottom)}"
          class="item"
          @click="handleChangeCurday(date)"
          :class="{'is-today' : date.date == today,'selected-day' : (date.date == selectedDay)}"
          >
          <p class="date-num"
            :style="{color: (date.date == selectedDay ? '#ffffff' : '#5b6175'),fontSize: initItemFontSize,opacity: (date.status || date.date == selectedDay ? 1 : .3)}">
            {{date.date.split('/')[2]}}</p>
          <span v-if="(date.has != undefined)" class="is-event"
            :style="{height: initEventHeight,width: initEventWidth,top: initEventTop,marginLeft: initEventMarginLeft}"
            :class="{'selected-event' : date.date == selectedDay}"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import i18n from '../i18n.js'
  import { dateTimeFormatter, isEqualDateStr } from '../tools.js'
  export default {
    name: 'cal-panel',
    data () {
      return {
        i18n
      }
    },
    props: {
      events: {
        type: Array,
        required: true
      },
      calendar: {
        type: Object,
        required: true
      },
      selectedDay: {
        type: String,
        required: false
      }
    },
    computed: {
      initItemHeight () {
        return this.calendar.options.clientWidth * 96 / 750 + 'px'
      },
      initItemWidth () {
        return this.calendar.options.clientWidth * 96 / 750 + 'px'
      },
      initEventHeight () {
        return this.calendar.options.clientWidth * 13 / 750 + 'px'
      },
      initEventWidth () {
        return this.calendar.options.clientWidth * 13 / 750 + 'px'
      },
      initItemFontSize () {
        return this.calendar.options.clientWidth * 30 / 750 + 'px'
      },
      initEventTop () {
        return this.calendar.options.clientWidth * 76 / 750 + 'px'
      },
      initEventMarginLeft () {
        return -this.calendar.options.clientWidth * 13 / 750 / 2 + 'px'
      },
      initTitleFontSize () {
        return this.calendar.options.clientWidth * 32 / 750 + 'px'
      },
      initMarginRight () {
        return this.calendar.options.clientWidth * 3 / 750 + 'px'
      },
      initMarginBottom () {
        return this.calendar.options.clientWidth * 3 / 750 + 'px'
      },
      dayList () {
        let firstDay = new Date(this.calendar.params.curYear, this.calendar.params.curMonth, 1)
        let dayOfWeek = firstDay.getDay()
        // 根据当前日期计算偏移量
        if (this.calendar.options.weekStartOn > dayOfWeek) {
          dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7
        } else if (this.calendar.options.weekStartOn < dayOfWeek) {
          dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn
        }
        let startDate = new Date(firstDay)
        startDate.setDate(firstDay.getDate() - dayOfWeek)
        let item = new Date(startDate)
        let status = 0
        let tempArr = []
        let tempItem = {}
        for (let i = 0; i < 42; i++) {
          item = new Date(startDate)
          item.setDate(startDate.getDate() + i)
          if (this.calendar.params.curMonth === item.getMonth()) {
            status = 1
          } else {
            status = 0
          }
          tempItem = {
            date: `${item.getFullYear()}/${item.getMonth() + 1}/${item.getDate()}`,
            status: status,
            index: i + 1
          }
          this.events.forEach((event) => {
            if (isEqualDateStr(event.date, tempItem.date)) {
              tempItem.has = event.date
            }
          })
          tempArr.push(tempItem)
        }
        return tempArr
      },
      today () {
        let dateObj = new Date()
        return `${dateObj.getFullYear()}/${dateObj.getMonth() + 1}/${dateObj.getDate()}`
      },
      curYearMonth () {
        let tempDate = Date.parse(new Date(`${this.calendar.params.curYear}/${this.calendar.params.curMonth + 1}/01`))
        return dateTimeFormatter(tempDate, this.i18n[this.calendar.options.locale].format)
      },
      customColor () {
        return this.calendar.options.color
      }
    },
    methods: {
      nextMonth () {
        this.$EventCalendar.nextMonth()
        this.$emit('month-changed', this.curYearMonth)
      },
      preMonth () {
        this.$EventCalendar.preMonth()
        this.$emit('month-changed', this.curYearMonth)
      },
      handleChangeCurday (date) {
        this.$emit('cur-day-changed', date.date)
      }
    }
  }
</script>
